﻿@{
    ViewBag.Title = "ExhibitorsRegister";
    Layout = "~/Views/Shared/_LayoutNoLeftNav.cshtml";
}
<script language="javascript" src="/js/jquery.iframe-post-form.js" type="text/javascript"></script>
<script src="/js/valums/fileuploader.js" type="text/javascript"></script>
<script type="text/javascript">
    function initExhibitorsMembers() {
        $("#ExhibitorsCert").change(function () {
            var insertNum = parseInt($(this).val());

            $(".ExhibitorsCert").hide();
            for (i = 1; i <= insertNum; i++) {
                var c = $("#credential" + i);
                if (!c.length) {
                    var insertContent = "<div class=\"ExhibitorsCert\" id=\"credential" + i + "\">" +
                                    "<form action=\"/Exhibitor/AddCredential\" method=\"post\" name=\"addcredential\" id=\"addcredential" + i + "\">" +
                                    "<input type=\"hidden\" name=\"CredentialCompanyId\" />" +
                                    "<ul>" +
                                        "<li class=\"formProp\"><span>*</span>姓名：</li>" +
                                        "<li class=\"formLongLine\"><input name=\"Name\" type=\"text\" class=\"inputNormal\" value=\"\" /></li>" +
                                        "<li class=\"clear\"></li>" +
                                    "</ul>" +
                                    "<ul>" +
                                        "<li class=\"formProp\"><span>*</span>职务：</li>" +
                                        "<li class=\"formLongLine\"><input name=\"Title\" type=\"text\" class=\"inputNormal\" value=\"\" /></li>" +
                                        "<li class=\"clear\"></li>" +
                                    "</ul>" +
                                    "<ul>" +
                                        "<input type=\"hidden\" name=\"PhotoUrl\" />" +
                                        "<li class=\"formProp\"><span>*</span>照片：</li>" +
                                        "<li class=\"formLongLine\"><div id=\"file-uploader-photo" + i + "\"></div></li>" +
                                        "<li class=\"clear\"></li>" +
                                    "</ul></form>" +
                                "</div>";
                    $("#credentiallist").append(insertContent);
                    createUploader(i);
                    $("#AddCredential" + i).iframePostForm(
                    {
                        iframeID: 'iframe-post-form',       // Iframe ID.
                        json: false,                        // Parse server response as a json object.
                        post: function () { },
                        complete: function (response) {
                            if (response.success) {
                                //to do
                            }
                        }
                    });
                }
                else {
                    c.show();
                }
            }
        });
    }

    $(function () {
        initExhibitorsMembers();
    })

    function createUploader(pid) {
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader-photo' + pid),
            action: '/File/UploadPhoto',
            debug: true,
            //sizeLimit: 50000,
            onComplete: function (id, fileName, responseJSON) {
                $("#hidden-photo" + pid).val(responseJSON.fileName);
                $("#file-uploader-photo"+pid).html("<img src='" + responseJSON.fileName + "' />");
            }
        });
    }

    // in your app create uploader as soon as the DOM is ready
    // don't wait for the window to load
    window.onload = function () {
        createUploader(1);
        $("#credentialcompanyadd").iframePostForm(
        {
            iframeID: 'iframe-post-form',       // Iframe ID.
            json: true,                        // Parse server response as a json object.
            post: function () { },
            complete: function (response) {
                if (response.success) {
                    $("input[name=CredentialCompanyId]").val(response.id);
                    $(".ExhibitorsCert:visible").find("form[name=addcredential]").submit();
                }
            }
        });
    };

    function onsubmit() {
        $("#credentialcompanyadd").submit();
    }

</script>

<div class="registerFormBox">
    <div class="registerFormBoxTop"></div>
    <div class="registerForm">
        <p class="registerFormTitle">参展人员证件登记表</p>
        <form action="/Exhibitor/AddCredentialCompany" id="credentialcompanyadd" method="post" target="iframe-post-form">
        <ul>
            <li class="formProp">&nbsp;</li>
            <li class="formLongLine">带<span class="redText">*</span>号为必填项</li>
            <li class="clear"></li>
        </ul>
        <ul>
            <li class="formProp"><span>*</span>企业名称：</li>
            <li class="formLongLine"><input name="companyname" type="text" class="inputLong" value="" /></li>
            <li class="clear"></li>
        </ul>
        <ul>
            <li class="formProp"><span>*</span>展位号：</li>
            <li class="formLongLine"><input type="text" name="ExhibitionNumber" class="inputNormal" value="" /></li>
            <li class="clear"></li>
        </ul>
        <ul>
            <li class="formProp"><span>*</span>联系人：</li>
            <li class="formLongLine"><input type="text" name="ContactName" class="inputNormal" value="" /></li>
            <li class="clear"></li>
        </ul>
        <ul>
            <li class="formProp"><span>*</span>联系电话：</li>
            <li class="formLongLine"><input type="text" name="ContactPhone" class="inputNormal" value="" /></li>
            <li class="clear"></li>
        </ul>
        <ul>
            <li class="formProp"><span>*</span>共申请参展证</li>
            <li class="formLongLine">
                <select id="ExhibitorsCert" name="CredentialCount">
                    <option selected="selected" value="1">1</option>
                    @for(int i=2;i<16;i++)
                    {<option value="@i">@i</option>}
                </select>
                张
            </li>
            <li class="clear"></li>
        </ul>
        </form>
        <div id="credentiallist">
        <div class="ExhibitorsCert" id="credential1">
        <form action="/Exhibitor/AddCredential" method="post" id="addcredential1" name="addcredential" target="iframe-post-form">
        <input type="hidden" name="CredentialCompanyId" />
            <ul>
                <li class="formProp"><span>*</span>姓名：</li>
                <li class="formLongLine"><input name="Name" type="text" class="inputNormal" value="" /></li>
                <li class="clear"></li>
            </ul>
            <ul>
                <li class="formProp"><span>*</span>职务：</li>
                <li class="formLongLine"><input name="Title" type="text" class="inputNormal" value="" /></li>
                <li class="clear"></li>
            </ul>
            <ul>
                <input type="hidden" id="hidden-photo1" name="PhotoUrl" />
                <li class="formProp"><span>*</span>照片：</li>
                <li class="formLongLine"><div id="file-uploader-photo1"></div></li>
                <li class="clear"></li>
            </ul>
        </form>
        </div>
        </div>
        <div class="solidLine"></div>
        <div class="registerFormInfo registerFormInfoLong">
            <p>
                注：
            </p>
            <p>
                1、电子照片规格为JPG格式，压缩品质8及以上，分辨率100像素/厘米以上；
            </p>
            <p>
                2、原则上按每9平方米3张证的比例分配，即1个标准展位提供3张证件，36㎡特装展位提供12张证件，以此类推；最多证件数量不得超过15张；
            </p>
            <p>
                3、如有疑问，请联系海峡两岸文博会组委会证件组，联系人：XXX，电话，0592-XXXXXXX。
            </p>
        </div>
        <div class="clear"></div>
        <div class="buttonBox">
            <a class="smallButton" href="javascript:void(0)" onclick="onsubmit();">提交报名</a>
        </div>
    </div>
    <div class="registerFormBoxBtm"></div>
</div>